<template>
  <view class="download-page">
    <button @click="downloadImage" class="download-btn">下载图片</button>
    <image v-if="imgPath" :src="imgPath" mode="widthFix" class="preview-img"></image>
    <view v-if="progress > 0 && progress < 100" class="progress-text">进度：{{ progress }}%</view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      imgPath: '',
      progress: 0,
      imgUrl: 'https://cdn.pixabay.com/photo/2025/11/05/20/57/monastery-9939590_1280.jpg'
    }
  },
  methods: {
    downloadImage() {
      this.progress = 0;
      this.imgPath = '';
      const downloadTask = uni.downloadFile({
        url: this.imgUrl,
        success: res => {
          if (res.statusCode === 200) {
            this.imgPath = res.tempFilePath;
          }
        }
      });
      downloadTask.onProgressUpdate(res => {
        this.progress = res.progress;
        console.log(`进度：${res.progress}%，已下载：${res.totalBytesWritten}B`);
      });
    }
  }
}
</script>
<style scoped>
.download-page {
  padding: 30rpx;
  background-color: #f5f7fa;
  min-height: 100vh;
}
.download-btn {
  background: #007aff;
  color: #fff;
  padding: 18rpx 0;
  border-radius: 12rpx;
  margin-bottom: 30rpx;
  width: 100%;
  font-size: 32rpx;
  transition: background-color 0.3s;
}
.download-btn:active {
  background-color: #0051aa;
}
.preview-img {
  width: 100%;
  margin-top: 20rpx;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}
.progress-text {
  color: #333;
  font-size: 28rpx;
  margin: 20rpx 0;
  padding: 15rpx;
  background-color: #fff;
  border-radius: 8rpx;
}
</style>